<template>
  <div class="showPie" :class="{ show: show }">
    <chart-title v-if="showTitle" :show="show" @showChange="eventShowChange">
      {{ chartItem.name }}
    </chart-title>
    <div class="charts-wrapper" v-show="show">
      <chart-cycle-list
        v-if="charts.length > 1"
        :cycleType="showChartType.cycleType"
        :cycleList="charts"
        @onCycleChange="eventCycleChange"
      ></chart-cycle-list>
      <charts-date-pagination
        :startTime="startTime"
        :endTime="endTime"
        :cycleType="showChartType.cycleType"
        @onDateChange="eventDateChange"
      ></charts-date-pagination>
      <div class="chart-area" id="chart" ref="chart"></div>
      <div
        class="chart-empty"
        v-if="chartData.source && !chartData.source.length"
      >
        <img src="/static/img/chart_empty.png" />
        <p>暂无相关数据</p>
      </div>
    </div>
  </div>
</template>
<script>
import { ChartDataMixin } from "./mixin.js";
export default {
  name: "ChartPie",
  data() {
    return {};
  },
  mixins: [ChartDataMixin],
  created() {},
  methods: {
    initChart() {
      if (!this.chart) {
        this.option = {
          color: ["#456de6", "#d81e06", "#d98807", "#45a3e6", "#45d8e6"], //配置颜色
          tooltip: {
            trigger: "item",
            formatter: params => {
              let text = `${params.name}：${params.data.unitData}（${params.percent}）%`;
              return text;
            }
          },
          legend: { type: "scroll", top: "4%", textStyle: { color: "#fff" } },
          grid: {
            containLabel: true,
            top: "30%",
            bottom: "0",
            left: "4%",
            right: "4%"
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["50%", "70%"],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: "center"
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: "30",
                  fontWeight: "bold"
                }
              },
              labelLine: {
                show: false
              },
              data: []
            }
          ]
        };
        this.chart = this.$echarts.init(this.$refs.chart);
        this.chart.setOption(this.option);
      }
      let xAxisData = this.formatterXAxisData(this.chartData);
      // let source = this.formatterDataset(this.chartData);
      let series = this.formatterSeries(this.chartData);
      console.log(xAxisData, series);
      this.chart.setOption({
        series
      });
      let option = this.chart.getOption();
      this.chart.setOption(option, true);
    },
    formatterDataset(data) {
      if (data.dataset && data.dataset.source && data.dataset.source.length) {
        let arr = [].concat(data.dataset.source);
        arr.unshift(["product", ...data.legend]);
        return arr;
      } else {
        return [];
      }
    },
    formatterXAxisData(data) {
      if (data.dataset && data.dataset.source && data.dataset.source.length) {
        let arr = [...new Set(data.dataset.source.map(e => e.xname))];
        return arr;
      } else {
        return [];
      }
    },
    formatterSeries(data) {
      let series = [
        {
          name: this.chartItem.name,
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          bottom: 0,
          label: {
            show: false,
            position: "center"
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold"
            }
          },
          labelLine: {
            normal: {
              show: true
            }
          },
          data: []
        }
      ];
      if (data.legend) {
        data.dataset.source.forEach(element => {
          element.data.forEach((eItem, eIndex) => {
            let value = {
              name: data.legend[eIndex],
              ...eItem
            };
            series[0].data.push(value);
          });
        });
      }
      return series;
    }
  }
};
</script>
<style lang=""></style>
